<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/main.css">
</head>

<body>
<br>
<div class="layui-container">
    <blockquote class="layui-elem-quote">一个简陋的登陆页</blockquote>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" name="accountId" required lay-verify="required" placeholder="请输入账号"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="userPassword" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="login">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>



<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="layui/layui.js"></script>
<script>
    layui.use(function () {

        var $ = layui.$
        var form = layui.form;

        //监听提交
        form.on('submit(login)', function (data) {
            // 在这里发送ajax请求，如果登录成功，就把返回的数据写入localstorage中，并且跳转，不成功就弹窗
            $.ajax({
                type: "POST",
                url: "http://localhost/note/user/login",
                data: JSON.stringify(data.field),
                contentType: "application/json;charset=UTF-8",
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    var userInfoJson = JSON.stringify(data)
                    layer.msg(userInfoJson)
                    var userInfo = JSON.parse(userInfoJson)
                    console.log(userInfo.userId)
                    console.log(userInfo.userName)
                    console.log(userInfo.userToken)
                    // 存入localstorage
                    localStorage.setItem('userId', userInfo.userId);
                    localStorage.setItem('userName', userInfo.userName);
                    localStorage.setItem('userToken', userInfo.userToken);
                    window.location.replace("http://localhost/dashboard.html");
                },
                error: function (data) {
                    console.log(data)
                    layer.msg(JSON.stringify(data))
                }
            });
            return false;
        });
    });
</script>
</body>

</html>